<template>
	<view class="return-order">
		<NavBar title="退货退款详情" :isBack="true"></NavBar>
		<view class="content">
			<!-- s -->
			 <view class="top-area">
			 	<view class="title">
			等待买家退货
			 	</view>
				<view class="time">
					还剩4天20小时56分36秒
				</view>
			 </view>
			<!-- e -->
			<!-- s -->
			<view class="header">
				<view class="line">
				</view>
				<view class="title">
					退款信息
				</view>
			</view>
			<!-- e -->
			<view class="middle-area">
				<view class="goods-msg">
					<image class="goods-img" src="@/static/goodDetail/demo.png"></image>
					<view class="specific-msg">
						<view class="title">
							<view>车载新风净化器</view>
						</view>
						<view class="order-num">卜公英（方形）30g玻璃瓶【买1送1】</view>
						<view class="control">
							<view class="price">¥ 129</view>
							<view class="num">
							  x 1
							</view>
						</view>
					</view>
				</view>
			</view>	
			
             <!-- s -->
			 <view class="bottom-area">
			 	<view class="configuration">
			 		<view class="row">
			 			<view class="left">退款原因</view>
			 			<view class="right">
			 		     不喜欢/不想要
			 		    </view>
			 		</view>
					
					<view class="row">
						<view class="left">商品件数</view>
						<view class="right">
					     1件
					    </view>
					</view>
					
					<view class="row">
						<view class="left">申请金额</view>
						<view class="right">
					      ¥ 15.00
					    </view>
					</view>
					
					<view class="row">
						<view class="left">申请金额</view>
						<view class="right">
					      已与客户协商，申请退货退款
					    </view>
					</view>
			 		

					<view class="upload">
						<view class="picload">
						</view>
						<view class="picload">
						</view>
					</view>
					
					<view class="row">
						<view class="left">申请金额</view>
						<view class="right">
					      已与客户协商，申请退货退款
					    </view>
					</view>
						
			 	</view>
			 </view>
			 <!-- e -->
			<view class="footer-area">
				<view class="btn">
					撤销申请
				</view>
				<view class="btn">
					填写退货物流
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.return-order {
	.content {
		position: relative;
		top: -40rpx;
		padding: 36rpx;
         .top-area {
			 padding: 36rpx;
			 background: #FFFFFF;
			 border-radius: 22rpx 22rpx 22rpx 22rpx;
			 margin-bottom: 18rpx;
			 .title {
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333; 
				padding-bottom: 10rpx;
			 }
			 .time {
				padding-top: 0;
				font-weight: 500;
				font-size: 20rpx;
				color: #999999; 
			 }
		 }
		 
		 .header {
			 display: flex;
			 align-items: center;
			 margin-bottom: 18rpx;
			 .line {
				width: 5rpx; 
				height: 36rpx;
				background-color:#58DBCF;
			    margin-right: 10rpx;
			 }
			 .title {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;  
			 }
		 }
		 
		.middle-area {
			padding: 36rpx;
			background: #FFFFFF;
			border-radius: 22rpx 22rpx 22rpx 22rpx;
			margin-bottom: 36rpx;
			.goods-msg {
			display: flex;
			}

			.goods-img {
				width: 155rpx;
				height: 155rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-right: 24rpx;
			}
			.specific-msg {
				width: 440rpx;
			
				.title {
					display: flex;
					align-items: center;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
			
				.order-num {
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
					margin: 8rpx 0rpx 40rpx;		
				}
				
				.control {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.price {
						font-weight: 800;
						font-size: 30rpx;
						color: #FF0000;
					}
			}
		}
}
      
    .bottom-area {
		padding: 36rpx;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		margin-bottom: 36rpx;
		.configuration {
			 .row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom:24rpx;
			.right {
				font-size: 24rpx;
				color: #333333; 
			 }
			
			}
			
			.left{
			padding-top: 0;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			}
			
		
		  .upload {
			  display: flex;
			  align-items: center;
			  justify-content: flex-end;
			  margin-bottom:24rpx;
			  gap: 20rpx;
			  .picload {
				background-color:  #F5F5F5;
				  width: 150rpx;
				  height: 150rpx;
			  }
		  }
		}	
	}

 .footer-area {
	 display: flex;
	 justify-content: flex-end;
	 gap: 10rpx;
	 .btn{
	 	text-align: center;
	 	width: 240rpx;
	 	height: 66rpx;
	 	line-height: 66rpx;
	 	background:#FFFFFF ;
		border:1px solid #58DBCF;
	 	border-radius: 500rpx 500rpx 500rpx 500rpx;
	 	font-weight: 800;
	 	font-size: 30rpx;
	 	color: #58DBCF;
	 	margin-top: 84rpx;
	 }
 }

}
}
</style>
